<template>
  <!-- 我的策略详情页面 -->
  <view>
    <view class="btns-title">
      <text class="btns-title" :class="!isactive?'active-btns':''" @click="btnscolor">自定义启动</text>
      <text class="btns-title" :class="isactive?'active-btns':''" @click="btnscolor">多币对模式</text>
    </view>
    <!-- 自定义内容 -->
    <view class="zidingyi" v-if="isshow">
      <view class="service" @click="show = true">
        公共服务器 <uni-icons color="#aeb9d5" type="arrowdown"></uni-icons>
      </view>
      <u-select v-model="show" :list="list"></u-select>
      <view class="moni-title">
        <view class="moni" @click="monishow=true">
          <text>Huobi-模拟账户</text>
          <uni-icons class="text-icon" color="#717a99" type="arrowdown"></uni-icons>
        </view>
        <!-- 模拟账户弹出层开始 -->
        <u-popup v-model="monishow" mode="bottom">
          <view class="moni-box">
            <view class="monibox-title">
              <text>选择API</text>
              <u-icon size="36" name="plus" @click="addapi"></u-icon>
            </view>
            <view class="shipan">
              <text class="shipancolor" :class="!isactiveshipan?'active-btns':''" @click="btnshipan">实盘账户</text>
              <text class="shipancolor" :class="isactiveshipan?'active-btns':''" @click="btnshipan">模拟账户</text>
            </view>
            <view class="" v-if="isshipan">
              模拟账户
            </view>
            <view class="" v-else>
              <view class="zhanghu-list" @click="checkboxmark(1)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Huobi</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==1">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
              <view class="zhanghu-list" @click="checkboxmark(2)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Binance</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==2">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
              <view class="zhanghu-list" @click="checkboxmark(3)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Okex</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==3">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </u-popup>
        <!-- 模拟账户弹出层结束 -->
        <view class="shouxu" @click="shouxushow = true">
          <text>手续费0.2%</text>
          <u-icon class="text-icon" color="#FFFFFF" name="edit-pen"></u-icon>
        </view>
        <!-- 手续费弹出层开始 -->
        <u-popup v-model="shouxushow" mode="center" mask :mask-close-able="maskcloseable" :closeable="closeable">
          <view class="money-box">
            <view class="money-title">手续费</view>
            <view class="yongjin-text">
              设置您的单向taker手续费，我们将在收益计算中扣除它
            </view>
            <view class="meiri">
              <view class="yongjin-input">
                <input type="text" value="" />
                <text>%</text>
              </view>
            </view>
            <view class="money-btns">
              <button type="default" size="mini">取消</button>
              <button type="primary" size="mini">确认</button>
            </view>
          </view>
        </u-popup>
        <!-- 手续费弹出层结束 -->
      </view>
      <view class="btc-usdt">
        <text class="btc-left">BTC/USDT</text>
        <view class="btc-right">
          <view class="">
            <view class="btc-text-top">
              234.423
            </view>
            <text class="btc-text-bottom">(-4.43%)</text>
          </view>
          <u-icon class="uicon" size="24" color="#949fbb" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="fang-box">
        <view class="qita-title">策略方向</view>
        <view class="xiang-box">
          <view class="fang-btn" :class="fangbtn?'active-fang':''" @click="fangbtns">
            赚USDT <text>多看行情</text>
          </view>
          <view class="fang-btn" :class="!fangbtn?'active-fang':''" @click="fangbtns">
            赚BTC<text>赚空行情</text>
          </view>
        </view>
      </view>
      <!-- 参数设置内容开始 -->
      <view class="canshu">
        <!-- 参数设置标题 -->
        <view class="canshu-title">
          <view class="" @click="argsetting">
            <text class="canshu-left">参数设置</text>
            <u-icon v-if="arg" color="#1d74f5" name="arrow-up"></u-icon>
            <u-icon v-else color="#1d74f5" name="arrow-down"></u-icon>
          </view>
          <view class="canshu-right">重置推荐设置</view>
        </view>
        <!-- 参数设置内容 -->
        <view class="" v-if="arg">
          <view class="qita-list">
            <view>
              <text class="qita-title">首单投入</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.000649~0.21637</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>BTC</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">投入缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">网格间隔</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.01~50</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">间隔缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">单格盈利率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.01~50</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">盈利率缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">价格上限</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">价格下限</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">最大挂单数</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="hengxian"></view>
          <view class="qita-list">
            <view>
              <text class="qita-title">总投入资金</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.000649~0.21637</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="总投入资金" />
              <text>BTC</text>
            </view>
          </view>
          <view class="slider-box">
            <u-slider v-model="value"></u-slider>
            <view class="slider-text">
              <text>0</text>
              <text>1.0323</text>
            </view>
            <view class="slider-text">
              <text>建议投入0.0112BTC</text>
              <text>可用0.231212BTC</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 参数设置内容结束 -->
      <!-- 其他设置内容开始 -->
      <view class="canshu">
        <!-- 其他设置标题 -->
        <view class="canshu-title">
          <view class="" @click="qitashezhi">
            <text class="canshu-left">其他设置</text>
            <u-icon v-if="qita" color="#1d74f5" name="arrow-up"></u-icon>
            <u-icon v-else color="#1d74f5" name="arrow-down"></u-icon>
          </view>
        </view>
        <!-- 其他设置内容 -->
        <view class="" v-if="qita">
          <view class="qita-list">
            <view>
              <text class="qita-title">总收益止盈</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">总亏损止损</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">定时自动终止</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>分</text>
            </view>
          </view>
          <view class="qita-bottom-text">
            <view class="">
              <text class="qita-title">终止后撤销未成交的订单</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="">
              <u-switch v-model="checked"></u-switch>
            </view>
          </view>
          <view class="qita-bottom-text">
            <view class="">
              <text class="qita-title">终止后自动兑换成投入币种</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="">
              <u-switch v-model="check"></u-switch>
            </view>
          </view>
        </view>
      </view>
      <!-- 其他设置内容结束 -->
    </view>
    <!-- 多币对模式 -->
    <view class="duobi" v-else>
      <view class="service" @click="show = true">
        公共服务器 <uni-icons color="#aeb9d5" type="arrowdown"></uni-icons>
      </view>
      <u-select v-model="show" :list="list"></u-select>
      <view class="moni-title">
        <view class="moni" @click="monishow=true">
          <text>Huobi-模拟账户</text>
          <uni-icons class="text-icon" color="#717a99" type="arrowdown"></uni-icons>
        </view>
        <!-- 模拟账户弹出层开始 -->
        <u-popup v-model="monishow" mode="bottom">
          <view class="moni-box">
            <view class="monibox-title">
              <text>选择API</text>
              <u-icon size="36" name="plus" @click="addapi"></u-icon>
            </view>
            <view class="shipan">
              <text class="shipancolor" :class="!isactiveshipan?'active-btns':''" @click="btnshipan">实盘账户</text>
              <text class="shipancolor" :class="isactiveshipan?'active-btns':''" @click="btnshipan">模拟账户</text>
            </view>
            <view class="" v-if="isshipan">
              模拟账户
            </view>
            <view class="" v-else>
              <view class="zhanghu-list" @click="checkboxmark(1)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Huobi</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==1">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
              <view class="zhanghu-list" @click="checkboxmark(2)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Binance</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==2">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
              <view class="zhanghu-list" @click="checkboxmark(3)">
                <view class="zhanghu-left">
                  <image src="../../static/logo.png" mode=""></image>
                  <text>Okex</text><text class="keyong-text">可用</text>
                </view>
                <view class="" v-if="markicon==3">
                  <u-icon name="checkbox-mark"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </u-popup>
        <!-- 模拟账户弹出层结束 -->
        <view class="shouxu" @click="shouxushow = true">
          <text>手续费0.2%</text>
          <u-icon class="text-icon" color="#FFFFFF" name="edit-pen"></u-icon>
        </view>
        <!-- 手续费弹出层开始 -->
        <u-popup v-model="shouxushow" mode="center" mask :mask-close-able="maskcloseable" :closeable="closeable">
          <view class="money-box">
            <view class="money-title">手续费</view>
            <view class="yongjin-text">
              设置您的单向taker手续费，我们将在收益计算中扣除它
            </view>
            <view class="meiri">
              <view class="yongjin-input">
                <input type="text" value="" />
                <text>%</text>
              </view>
            </view>
            <view class="money-btns">
              <button type="default" size="mini">取消</button>
              <button type="primary" size="mini">确认</button>
            </view>
          </view>
        </u-popup>
        <!-- 手续费弹出层结束 -->
      </view>
      <view class="btc-usdt">
        <text class="btc-left">BTC/USDT</text>
        <view class="btc-right">
          <view class="">
            <view class="btc-text-top">
              234.423
            </view>
            <text class="btc-text-bottom">(-4.43%)</text>
          </view>
          <u-icon class="uicon" size="24" color="#949fbb" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="btn-add">
        <u-button type="primary"size="mini" shape="circle">添加+</u-button>
      </view>
      <!-- 参数设置内容开始 -->
      <view class="canshu">
        <!-- 参数设置标题 -->
        <view class="canshu-title">
          <view class="" @click="argsetting">
            <text class="canshu-left">参数设置</text>
            <u-icon v-if="arg" color="#1d74f5" name="arrow-up"></u-icon>
            <u-icon v-else color="#1d74f5" name="arrow-down"></u-icon>
          </view>
          <view class="canshu-right">重置推荐设置</view>
        </view>
        <!-- 参数设置内容 -->
        <view class="" v-if="arg">
          <view class="qita-list">
            <view>
              <text class="qita-title">首单投入</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.000649~0.21637</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>BTC</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">投入缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">网格间隔</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.01~50</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">间隔缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">单格盈利率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.01~50</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">盈利率缩放率</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围50~200</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">价格上限</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">价格下限</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">最大挂单数</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input class="right-border" type="text" value="" placeholder="选填" />
            </view>
          </view>
          <view class="hengxian"></view>
          <view class="qita-list">
            <view>
              <text class="qita-title">总投入资金</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围0.000649~0.21637</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="总投入资金" />
              <text>BTC</text>
            </view>
          </view>
          <view class="slider-box">
            <u-slider v-model="value"></u-slider>
            <view class="slider-text">
              <text>0</text>
              <text>1.0323</text>
            </view>
            <view class="slider-text">
              <text>建议投入0.0112BTC</text>
              <text>可用0.231212BTC</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 参数设置内容结束 -->
      <!-- 其他设置内容开始 -->
      <view class="canshu">
        <!-- 其他设置标题 -->
        <view class="canshu-title">
          <view class="" @click="qitashezhi">
            <text class="canshu-left">其他设置</text>
            <u-icon v-if="qita" color="#1d74f5" name="arrow-up"></u-icon>
            <u-icon v-else color="#1d74f5" name="arrow-down"></u-icon>
          </view>
        </view>
        <!-- 其他设置内容 -->
        <view class="" v-if="qita">
          <view class="qita-list">
            <view>
              <text class="qita-title">总收益止盈</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
              <text class="qita-fanwei">范围30~10000</text>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">总亏损止损</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>%</text>
            </view>
          </view>
          <view class="qita-list">
            <view>
              <text class="qita-title">定时自动终止</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="qita-input">
              <input type="text" value="" placeholder="选填" />
              <text>分</text>
            </view>
          </view>
          <view class="qita-bottom-text">
            <view class="">
              <text class="qita-title">终止后撤销未成交的订单</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="">
              <u-switch v-model="checked"></u-switch>
            </view>
          </view>
          <view class="qita-bottom-text">
            <view class="">
              <text class="qita-title">终止后自动兑换成投入币种</text>
              <u-icon class="qita-icon" color="#727b9c" name="question-circle"></u-icon>
            </view>
            <view class="">
              <u-switch v-model="check"></u-switch>
            </view>
          </view>
        </view>
      </view>
      <!-- 其他设置内容结束 -->
    </view>

    <!-- 底部盒子按钮 -->
    <view class="bottom-box">
      <button type="primary">启动</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "myceluedetail",
    data() {
      return {
        fangbtn:true,
        value: 30,
        check: true,
        checked: true,
        qita: true, // 其他设置的显示与隐藏
        arg: true, // 参数设置的显示与隐藏
        markicon: '',
        isactiveshipan: false,
        isshipan: true, // 显示实盘账户
        maskcloseable: false,
        closeable: true,
        monishow: false, // 是否显示模拟账户弹出层
        shouxushow: false, // 是否显示手续费弹出层
        isactive: false,
        isshow: true,
        show: false,
        list: [{
          value: '1',
          label: '公共服务器'
        }],
      }
    },
    methods: {
      btnscolor() {
        this.isactive = !this.isactive
        this.isshow = !this.isshow
      },
      btnshipan() {
        this.isactiveshipan = !this.isactiveshipan
        this.isshipan = !this.isshipan
      },
      checkboxmark(i) {
        this.markicon = i
      },
      // 跳转到添加api页面
      addapi() {
        uni.navigateTo({
          url: '../addapi/addapi'
        })
      },
      // 参数设置的展开与关闭
      argsetting() {
        this.arg = !this.arg
      },
      // 其他设置的展开与关闭
      qitashezhi() {
        this.qita = !this.qita
      },
      // 策略方向切换
      fangbtns(){
        this.fangbtn=!this.fangbtn
      }
    }
  }
</script>

<style scoped>
  page {
    background-color: #091430;
    padding-bottom: 200rpx;
  }

  .bottom-box {
    position: fixed;
    bottom: 0;
    padding: 30rpx;
    width: 100%;
    height: 160rpx;
    line-height: 160rpx;
    background-color: #202b47;
    z-index: 3;
  }

  .btns-title {
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;
    color: #707b99;
    margin: 20rpx 0;
  }

  .active-btns {
    font-size: 36rpx;
    color: #FFFFFF !important;
  }

  .zidingyi {
    padding: 0 40rpx;
  }
  .duobi{
    padding: 0 40rpx;
  }

  .service {
    color: #aeb9d5;
    padding: 8rpx 12rpx;
    width: 220rpx;
    text-align: center;
    background-color: #111c3a;
  }

  .moni-title {
    display: flex;
    justify-content: space-around;
    color: #FFFFFF;
    margin: 30rpx 0;
  }

  .text-icon {
    margin-left: 10rpx;
  }

  .money-box {
    width: 680rpx;
    height: 500rpx;
    color: #b1bfda;
    background-color: #1e2c47;
    padding: 0 40rpx 40rpx;
  }

  .money-title {
    height: 120rpx;
    line-height: 120rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
  }

  .meiri {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .yongjin-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background-color: #0a1330;
    border-radius: 40rpx;
    padding: 0 30rpx;
    margin: 40rpx 0;
  }

  .yongjin-input input {
    width: 90%;
    border-right: 1rpx solid #48516e;
    margin-right: 20rpx;
  }

  .xiaoyi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 140rpx;
  }

  .yongjin-text {
    font-size: 24rpx;
    margin-bottom: 30rpx;
  }

  .money-btns {
    display: flex;
    justify-content: space-around;
  }

  .moni-box {
    height: 600rpx;
    background-color: #131c3b;
    padding: 40rpx;
  }

  .monibox-title {
    display: flex;
    justify-content: space-between;
  }

  .shipancolor {
    color: #707b99;
    font-size: 32rpx;
  }

  .shipan {
    display: flex;
    justify-content: space-around;
    margin: 30rpx;
  }

  .zhanghu-list {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 1px solid #394261;
  }

  .zhanghu-left image {
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
    margin-right: 30rpx;
  }

  .keyong-text {
    color: #a3aecc;
    font-size: 24rpx;
    margin-left: 20rpx;
  }

  .btc-usdt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #121d39;
    height: 120rpx;
    padding-left: 40rpx;
  }

  .btc-left {
    color: #FFFFFF;
    font-size: 36rpx;
  }

  .btc-right {
    display: flex;
    text-align: right;
  }

  .uicon {
    margin: 0 40rpx;
  }

  .btc-text-top {
    font-size: 32rpx;
    color: #eb456d;
  }

  .btc-text-bottom {
    font-size: 24rpx;
    color: #a5496f;
  }

  .canshu-title {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0;
  }

  .canshu-left {
    color: #007AFF;
    margin-right: 20rpx;
  }

  .canshu-right {
    color: #FFFFFF;
    background-color: #0c77fc;
    padding: 6rpx 16rpx;
    border-radius: 40rpx;
  }

  .qita-title {
    font-size: 30rpx;
    color: #aeb7d6;
  }

  .qita-icon {
    margin: 0 8rpx;
  }

  .qita-fanwei {
    font-size: 24rpx;
    color: #727b9c;
  }

  .qita-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    background-color: #121d39;
    padding: 0 40rpx;
    color: #aab5d1;
    border-radius: 10rpx;
    margin: 20rpx 0 30rpx 0;
  }

  .qita-input input {
    border-right: 1px solid #5e6987;
    width: 88%;
  }

  .qita-bottom-text {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
  }

  .right-border {
    border-right: 0 !important;
  }

  .hengxian {
    height: 2rpx;
    background-color: #121d39;
    margin: 20rpx 0;
  }

  .wrap {
    padding: 30rpx;
  }

  .slider-box {
    margin-top: 50rpx;
  }

  .slider-text {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    color: #727b9c;
    margin: 10rpx 0;
  }
  .btn-add{
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
  }
  .fang-box{
    margin-top: 20rpx;
  }
  .xiang-box{
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
  }
  .fang-btn{
    background-color: #121d39;
    padding: 12rpx 30rpx;
    border-radius: 20rpx;
    color: #aab5d1;
  }
  .active-fang{
    color: #FFFFFF;
    background-color: #007AFF;
  }
</style>
